<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script>
        function htmlFontSize() {
            var clientWidth = document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth;
            if (clientWidth >= 768 && clientWidth < 960) {
                clientWidth = 812;
            } else if (clientWidth >= 1280) {
                clientWidth = 1080;
            }

            document.documentElement.style.fontSize = clientWidth * 1 / 10 + "px";
            return clientWidth * 1 / 10;
        }
        htmlFontSize()

        window.onresize = function () {
            htmlFontSize()
        }
    </script>
    <title>海尔</title>
    <link rel="stylesheet" href="./css/style.min.css">
</head>

<body>
        <div class="left-Nav-fixed">
                <div class="parallel-main"><a href="http://zt.cjwsc.com/zt/20171111/main/1111-pc.html" target="_blank"><img src="../publice/rightNav/main.png" alt=""></a></div>
                <div class="parallel-point"><a href="http://zt.cjwsc.com/zt/20171111/msmy/index.html" target="_blank" class="block"><img src="../publice/rightNav/1.png" alt=""></a></div>
                <div class="parallel-point"><a href="http://zt.cjwsc.com/zt/20171111/king/king-pc.html" target="_blank" class="block"><img src="../publice/rightNav/2.png" alt=""></a></div>
                <div class="parallel-point"><a href="http://zt.cjwsc.com/zt/20171111/quanmin/quanm-pc.html" target="_blank" class="block"><img src="../publice/rightNav/3.png" alt=""></a></div>
                <div class="parallel-point"><a href="http://zt.cjwsc.com/zt/20171111/brandnew/brand-pc.html" target="_blank" class="block"><img src="../publice/rightNav/4.png" alt=""></a></div>
                <div class="parallel-point"><a href="http://zt.cjwsc.com/zt/20171111/jd/index.html" target="_blank" class="block"><img src="../publice/rightNav/5.png" alt=""></a></div>
                <div class="parallel-point"><a href="http://zt.cjwsc.com/zt/20171111/haier/index.html" target="_blank" class="block"><img src="../publice/rightNav/6.png" alt=""></a></div>
                <div class="s-backtop back-top"><img src="../publice/rightNav/s-backtop.png" alt=""></div>
              </div>  
    <header class="header clearfix">
        <img class="fl" src="./img/banner_01.jpg" alt="">
        <img class="fl" src="./img/banner_02.jpg" alt="">
        <img class="fl" src="./img/banner_03.jpg" alt="">
        <img class="fl" src="./img/banner_04.jpg" alt="">
        <span class="header-top">
            <img src="./img/top.png" alt="">
        </span>
    </header>
    <div class="wrap">
        <div class="wrap-title1">
            特惠预售 · 电视/空调
        </div>
        <div class="container clearfix"></div>
        <div class="wrap-title1">特惠预售 · 冰箱</div>
        <div class="container clearfix"></div>
        <div class="wrap-title1">特惠预售 · 洗衣机</div>        
        <div class="container clearfix"></div>
        <div class="wrap-title1">特惠预售·冷柜/厨电/热水器</div>        
        <div class="container clearfix"></div>
    </div>
    <footer>
        <div class="back-top">
            返回顶部
        </div>
    </footer>
    <!-- template -->
    <script type="text/html" id="card-tpl">
        {{each $data}}
        <a class="card fl {{$value.status==2||$value.stock_num==0?'masker':'C_J_good'}}" data-id="{{$value.id}}">
            <img class="card-pic" src="{{$value.pic}}" alt="">
            <div class="card-bar">
                <p class="card-bar-h">{{$value.name}}</p>
                <div class='clearfix'>
                    <p class="card-bar-new fl">活动价￥
                        <i>{{$value.discountPrice}}</i>
                    </p>
                    <div class='fr'>
                        <p class="card-bar-old">原价:
                            <del>￥{{$value.price_on_tag}}</del>
                        </p>
                        <span class='card-bar-now'>立即抢购&gt;</span>                    
                    </div>
                </div>
            </div>
        </a>
        {{/each}}
    </script>
</body>
<script src="../../../js/jquery-1.8.3.min.js"></script>
<script src="../../../js/art-template.js"></script>
<script src="../../../js/login.js"></script>
<script src="../../../js/model.js"></script>
<script src="../../../js/model-citizen.js"></script>
<script class="app-min"></script>
<script>
    (function (window, $, template) {
        var SW = window.screen.width;
        if (SW < 810) {
            $('.app-min').attr('src', "../../../js/app.min.js")
        }
        var info = [
        [148781,96143,129970],
        [141987,116889,95356,101353,95404,94866],
        [148338,143603,95354],
        [148972,148783,143363]
        ]

        function sorter(oldArr, newArr) {
            var resArr = [];
            oldArr.forEach(function (oldVal) {
                newArr.forEach(function (newVal) {
                    if (oldVal == newVal.id) {
                        addAttr(newVal, oldVal)
                        resArr.push(newVal);
                    }
                })
            });
            return resArr;
        }

        function addAttr(obj, id) {
            obj.pic = obj.pic.replace('240_240', '800_800');
            obj.screen = window.screen.width;
        }

        function getData(id, index) {
            $.ajax({
                url: 'http://www.cjwsc.com/qcwdProduct/getProductByIds',
                data: {
                    ids: id.join(','),
                    business_type: SW < 960 ? (SW < 810 ? 20 : 50) : 10,
                    client_type: SW < 960 ? (SW < 810 ? 2 : 5) : 1
                },
                dataType: "jsonp",
                jsonp: 'jsonpcallback',
                success: function (res) {
                    res = sorter(id, res.msg)
                    $('.container').eq(index).html(template('card-tpl', res))
                }
            })
        }
        setData(info)

        function setData(info) {
            info.forEach(function (v, i) {
                getData(v, i)
            })
        }




        // 页面滚动
        function pageScrollTo(size) {
            $('html,body').animate({
                scrollTop: size
            }, 500)
        };

        // 功能
        (function (window, $) {

            // 顶部nav功能区
            $('.wrap-nav').on('click', 'li', function () {
                var $this = $(this);
                $this.addClass('cur').siblings().removeClass('cur');
                $('.container-tab .container').eq($this.index()).fadeIn().siblings().fadeOut()
            })
            // 返回顶部
            $('.back-top').on('click', function () {
                pageScrollTo(0)
            });
        }(window, $))

    })(window, $, template)
</script>

</html>